<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 80%;
            margin: 0 auto;
            background-color: #ffffff;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
        }

        .header {
            text-align: center;
            padding: 20px;
        }

        .header img {
            max-width: 100%;
        }

        .body {
            padding: 20px;
        }

        .body > div {
            margin-bottom: 10px;
        }

        .body button {
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 10px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #007bff;
            color: #fff;
        }

        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .footer {
            background-color: #007bff;
            color: #fff;
            text-align: center;
            padding: 10px;
        }

        .footer span {
            margin: 0 10px;
        }

        /* 弹出表单的样式 */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .form-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
        }

        .form-container h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        .form-container label {
            display: block;
            margin-bottom: 10px;
        }

        .form-container input {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .form-container button {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function (){
            $("#addEmployeeButton").click(function (){
                $("#addEmployeeOverlay").show();
            })

            // 当点击弹出层灰色背景时隐藏弹出层
            $("#addEmployeeOverlay").click(function (event) {
                if (event.target === this) {
                    $(this).hide();
                }
            });

            $("#addbtn").click(function (){
                const employeeName = $("#employeeName").val();
                const employeeAge = $("#employeeAge").val()
                const gender = $("[name=gender]:checked").val()
                const employeePhone = $("#employeePhone").val()
                const employeeAddress = $("#employeeAddress").val()

                if(!/^[一-龥]{2,5}$/.test(employeeName)){
                    alert("姓名不符合要求")
                    return;
                }
                if(employeeAge<20 || employeeAge>40){
                    alert("年龄不符合要求")
                    return;
                }
                if(!/^(13|15|17|18)\d{9}$/.test(employeePhone)){
                    alert("电话不符合要求")
                    return;
                }

                // console.log(employeeName,employeeAge,gender)
                const str = `<tr>
                                <td><input type="checkbox" class="onecheckbox"/></td>
                                <td>${employeeName}</td>
                                <td>${employeeAge}</td>
                                <td>${gender}</td>
                                <td>${employeePhone}</td>
                                <td>${employeeAddress}</td>
                                <td><button class="onedelete">删除</button></td>
                            </tr>`;
                $("tbody").append(str)
            })

            $("#allcheckbox").click(function (){
                $(".onecheckbox").prop("checked",this.checked)
            })

            $(".onecheckbox").click(function (){
                let flag = true;
                $(".onecheckbox").each(function (index,item){
                    flag = item.checked && flag;
                })
                $("#allcheckbox").prop("checked",flag)
            })

            $("#bigdelete").click(function (){
                $(".onecheckbox").each(function (index,item){
                    if(item.checked) {
                        $(item).parents("tr").remove()
                    }
                })
            })

            // 使用事件委托将删除按钮的点击事件绑定到表格的父元素
            $("table").on("click", ".onedelete", function () {
                $(this).closest("tr").remove();
            });
        })
    </script>
</head>
<body>
<div class="container">
    <div class="header">
        <img src="images/banner.jpg" alt="Banner Image"/>
    </div>
    <div class="body">
        <div>首页 > 员工管理</div>
        <div>
            <button id="bigdelete">批量删除</button>
            <button id="addEmployeeButton">添加</button>
        </div>
        <table>
            <thead>
            <tr>
                <th><input id="allcheckbox" type="checkbox"/>全选</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>电话</th>
                <th>住址</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><input type="checkbox" class="onecheckbox"/></td>
                <td>韩梅梅</td>
                <td>18</td>
                <td>女</td>
                <td>13512346985</td>
                <td>北京海淀区</td>
                <td><button class="onedelete">删除</button></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="onecheckbox"/></td>
                <td>李雷</td>
                <td>20</td>
                <td>男</td>
                <td>13876543210</td>
                <td>上海浦东区</td>
                <td><button class="onedelete">删除</button></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="onecheckbox"/></td>
                <td>小明</td>
                <td>22</td>
                <td>男</td>
                <td>13688889999</td>
                <td>广州天河区</td>
                <td><button class="onedelete">删除</button></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="footer">
        <p>
            <span>关于系统</span>
            <span>服务协议</span>
            <span>广告服务</span>
            <span>联系我们</span>
            <span>网站导航</span>
        </p>
        <p><span>Copyright@2000-2030 All Right</span></p>
        <p><span>版权所有</span></p>
    </div>

    <!-- 添加员工表单的弹出层 -->
    <div class="overlay" id="addEmployeeOverlay">
        <div class="form-container">
            <h2>添加新员工</h2>
            <div id="addEmployeeForm">

                <label for="employeeName">姓名:</label>
                <input type="text" id="employeeName" name="employeeName" required>

                <label for="employeeAge">年龄:</label>
                <input type="number" id="employeeAge" name="employeeAge" required>

                <label>性别:</label>
                <input type="radio" name="gender" value="男" checked/>男 <input type="radio" name="gender" value="女"/>女

                <label for="employeePhone">电话:</label>
                <input type="tel" id="employeePhone" name="employeePhone" required>

                <label for="employeeAddress">住址:</label>
                <input type="text" id="employeeAddress" name="employeeAddress" required>

                <button type="button" id="addbtn">添加员工</button>
            </div>
        </div>
    </div>
</div>
<script>
</script>
</body>
</html>
